<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../plugins/vue.min.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>

<!--1.Hello world-->
<h4>1.Hello world</h4>
<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

<hr>

<!--2.v-bind 它会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。-->
<h4>2.v-bind</h4>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<script>
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
</script>

<hr>

<!--3.v-if-->
<h4>3.v-if</h4>
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    })
</script>

<hr>

<!--4.v-for: param in params-->
<h4>4.v-for</h4>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    })
</script>

<hr>

<!--5.v-on:简写--@click-->
<h4>5.v-on</h4>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
    <button @click="reverseMessage">逆转消息</button>
</div>
<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>

<hr>

<!--6.v-model:实现表单输入和应用状态之间的双向绑定,“”拿到data中的参数-->
<h4>6.v-model</h4>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

<hr>

<!--7.Vue.component:自定义组件-->
<h4>7.Vue.component</h4>
<div id="app-7">
    <ol>
        <!--
          现在我们为每个 todo-item 提供 todo 对象
          todo 对象是变量，即其内容可以是动态的。
          我们也需要为每个组件提供一个“key”，稍后再
          作详细解释。
        -->
        <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
        </todo-item>
    </ol>
</div>
<script>
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其它什么人吃的东西' }
            ]
        }
    })
</script>

<hr>
<hr>
<hr>
<h1>数据与方法</h1>
<!--当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。-->
<script>
    // 我们的数据对象
    var data = { a: 1 }

    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
        data: data
    })
    
    // $watch实例方法。
    vm.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
    })
</script>
<hr>

<h3>生命周期钩子</h3>
<pre>
每个 Vue 实例在被创建时都要经过一系列的初始化过程，在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码：
    
    new Vue({
        data: {
        a: 1
    },
    created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
        }
    })
还有mounted、updated 和 destroyed等。
</pre>
<hr>

<h3>8.Mustache标签调用method</h3>
<!--Mustache标签：{{msg}}}.-->
<!--<span>Message: {{ msg }}</span>:-->
<!--Mustache 标签将会被替代为对应数据对象上 msg 属性的值-->

<div id="myApp1">
    <p>{{message}}</p>
    <p>{{message | toupper }}</p>
    <hr>
    <p>现在的vue.js学习进度是{{num}}({{num | topercentage}})。</p>
</div>
<script>
    var myApp1 = new Vue({
        el: '#myApp1',
        data: {
            message: 'hello vue.js world.',
            num: 0.3
        },
        filters: {
            toupper: function(value){
                return value.toUpperCase();
            },
            topercentage: function(value){
                return value * 100 + '%';
            },
        },
    });
</script>

<hr>


<h3>9.computed属性 处理元数据</h3>
<!--处理元数据，便于进行二次利用。-->
<div id="myApp2">
    今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。
</div>
<script>
    var myApp2 = new Vue({
        el: '#myApp2',
        data: {
            price: 29980
        },
        computed: {
            priceInTax: function(){
                return this.price * 1.08;
            },
            priceChinaRMB: function(){
                return Math.round(this.priceInTax / 16.75);
            },
        },
    });
</script>

<hr>

<h3>10.$watch自带方法</h3>
<!--用于观察变量的变化，然后进行相应的处理。-->
<div id="myApp3">
    <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
    <button @click="btnClick(10000)">加价10000円</button>
</div>
<script>
    var myApp3 = new Vue({
        el: '#myApp3',
        data: {
            price: 0,
            priceInTax: 0,
            priceChinaRMB: 0,
        },
        watch: {
            price: function(newVal, oldVal){
                console.log(newVal, oldVal);
                this.priceInTax = Math.round(this.price * 1.08);
                this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
            },
        },
        methods: {
            btnClick: function(newPrice){
                this.price += newPrice;
            },
        },
    });
    myApp.price = 29980;
</script>

<hr>

<h3>11.get,set,this方法</h3>
<!--this指的是 Vue的引用-->
<div id="myApp4">
    <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
    <button @click="btnClick(10800)">把含税改价为10800円</button>
</div>
<script>
    var myApp4 = new Vue({
        el: '#myApp4',
        data: {
            price: 29980
        },
        computed: {
            priceInTax: {
                get:function(){
                    return this.price * 1.08;
                },
                set: function(value){
                    this.price = value / 1.08;
                }
            },
            priceChinaRMB: function(){
                return Math.round(this.priceInTax / 16.75);
            },
        },
        methods: {
            btnClick: function(newPrice){
                this.priceInTax = newPrice;
            },
        },
    });
</script>

<hr>

<h3>12.v-bind:class</h3>
<!--为html标记绑定样式单class属性-->
<div id="myApp5">
    <div :class="{active:true}">红色文本0</div>
    <div v-bind:class="{active:isActive}">红色文本1</div>
    <div :class="{active:isActive}">红色文本2</div>
    <button @click="btnClick">改变class吧</button>
</div>
<script>
    var myApp5 = new Vue({
        el: '#myApp5',
        data: {
            isActive: true,
        },
        methods: {
            btnClick: function(){
                this.isActive = !this.isActive;
            },
        },
    });
</script>

<hr>

</body>

</html>